<script setup>
import { ref } from 'vue'
import { getOrdersByPage } from '@/api/order.js'
import { ElMessage } from 'element-plus'
import { getOrderDetailById } from '@/api/orderDetail.js'

const loading = ref(false)

const pageSelect = ref({
  page: 1,
  pageSize: 15,
  status: '',
  total: 0,
  orderId: ''
})

const statusOptions = {
  '0': '未支付',
  '1': '未接单',
  '2': '待发货',
  '3': '已发货',
  '4': '已完成',
  '5': '已取消'
}

const orderList = ref([])
const getOrders = async () => {
  loading.value = true
  try {
    const res = await getOrdersByPage(pageSelect.value)
    orderList.value = res.data.orders
    pageSelect.value.total = res.data.total
  } catch (error) {
    ElMessage.error('获取订单失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
getOrders()
const resetSearch = () => {
  pageSelect.value.orderId = ''
  pageSelect.value.status = ''
  pageSelect.value.page = 1
  getOrders()
}
// 分页相关
const handleSizeChange = (newSize) => {
  pageSelect.value.pageSize = newSize
  pageSelect.value.page = 1
  getOrders()
}
const handleCurrentChange = (newPage) => {
  pageSelect.value.page = newPage
  getOrders()
}

// 查看订单详情
const detailVisible = ref(false)
const orderDetailList = ref([])
const orderValue = ref({})
const getOrderDetail = async (orderId) => {
  const res = await getOrderDetailById(orderId)
  orderDetailList.value = res.data
}
const viewDetail = (order) => {
  detailVisible.value = true
  orderValue.value = order
  getOrderDetail(order.orderId)
  console.log(detailVisible.value)
}

</script>

<template>
<el-card class="page-container">
  <template #header>
    <div class="header">我的订单</div>
  </template>
  
  <!-- 搜索表单 -->
  <el-form inline class="search-form">
    <el-form-item label="订单编号：">
      <el-input v-model="pageSelect.orderId" placeholder="请输入订单编号" clearable />
    </el-form-item>
    
    <el-form-item label="订单状态：" style="width: 275px;">
      <el-select v-model="pageSelect.status" placeholder="全部状态" clearable>
        <el-option
            v-for="(label, value) in statusOptions"
            :key="value"
            :label="label"
            :value="value"
        />
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="getOrders">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </el-form-item>
  </el-form>
  
  <!-- 订单表格 -->
  <el-table
      :data="orderList"
      v-loading="loading"
      border
      highlight-current-row
      class="order-table"
      element-loading-text="数据加载中..."
      element-loading-background="rgba(255, 255, 255, 0.8)"
      element-loading-spinner="el-icon-loading"
  >
    <el-table-column label="订单编号" prop="orderId" width="225" align="center" />

    <el-table-column label="订单状态" prop="status" width="165" align="center">
      <template #default="{ row }">
        <span>{{ statusOptions[row.status] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="价格" prop="totalAmount" width="170" align="center">
      <template #default="{ row }">￥{{ row.totalAmount.toFixed(2) }}</template>
    </el-table-column>
    <el-table-column label="下单时间" prop="orderDate" width="215" align="center" />
    <el-table-column label="操作" width="185" align="center">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="viewDetail(row)" round plain>查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination-wrapper">
    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageSelect.total"
        :current-page="pageSelect.page"
        :page-size="pageSelect.pageSize"
        :page-sizes="[15, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</el-card>

<el-dialog
    title="订单详情"
    :model-value="detailVisible"
    @update:model-value="val => detailVisible = val"
    width="50%"
    @close="closeDetail"
    class="custom-dialog"
>
  <!-- 订单基本信息 -->
  <div class="order-info">
    <p><strong>订单 ID：</strong>{{ orderValue.orderId }}</p>
    <p><strong>用户 ID：</strong>{{ orderValue.userId }}</p>
    <p><strong>订单时间：</strong>{{ orderValue.orderDate }}</p>
    <p><strong>订单金额：</strong>{{ orderValue.totalAmount }}</p>
  </div>
  <!-- 订单详情表格 -->
  <el-table :data="orderDetailList" border stripe style="margin-top: 20px">
    <!-- 图片列 -->
    <el-table-column label="图片" align="center" width="120">
      <template #default="{ row }">
        <img
          :src="row.imgUrl"
          alt="商品图片"
          style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="flowerName" label="商品名称" align="center"/>
    <el-table-column prop="quantity" label="数量" align="center"/>
    <el-table-column prop="price" label="单价" align="center"/>
    <el-table-column label="总价" align="center">
      <template #default="scope">
        ￥{{ (scope.row.quantity * scope.row.price).toFixed(2) }}
      </template>
    </el-table-column>
  </el-table>
</el-dialog>
</template>



<style scoped>
.page-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.header {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 30px;
}

/* 表格样式 */
.order-table {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.order-table .el-table__header-wrapper {
  background-color: #f0f2f5;
  font-weight: bold;
}

.order-table .el-table__cell {
  padding: 14px 10px;
  text-align: center;
  color: #333;
}

.order-table .el-button {
  font-size: 13px;
}

/* 分页样式 */
.pagination-wrapper {
  margin-top: 35px;
  display: flex;
  justify-content: center;
}

.custom-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background-color: #f9f9f9;
  padding: 20px;
}

.order-info {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.order-info p {
  font-size: 16px;
  color: #333;
  margin: 8px 0;
  line-height: 1.6;
}

.order-info strong {
  color: #409EFF;
}

.el-table th {
  background-color: #f0f2f5;
  font-weight: bold;
  color: #333;
}

.el-table td {
  font-size: 14px;
  color: #555;
}

.el-table img {
  border: 2px solid #eee;
  transition: transform 0.3s ease;
}

.el-table img:hover {
  transform: scale(1.1);
}

.el-dialog__header {
  background-color: #409EFF;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 12px 12px 0 0;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  text-align: right;
  padding: 10px 20px;
  background-color: #f0f2f5;
  border-radius: 0 0 12px 12px;
}
</style>

